<div class="page-header">
    <h1>
        用户帐户交易记录
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
        </small>
    </h1>
</div>
<div class="row">
    <div class="col-xs-12">
        <table id="dtpBankTrade" class="dataTable">
            <tfoot>
            <tr>
                <td colspan="6">本页合计：</td>
                <td>
                    <span name="Trade_Amt" class="tooltip-"/>
                </td>
                <td colspan="3"></td>
            </tr>
            </tfoot>
        </table>
        <div id="dtpBankTrade_filter" class="dataTables_filter">
            <div>
                <select id="dtpBankTrade_F_SType" class="selectpicker" data-style="btn btn-info btn-sm" data-width="90px">
                    <option value="">模糊查询</option>
                    <option data-divider="true"></option>
                    <option value="User_ID">用户ID</option>
                    <option value="User_NickName">用户昵称</option>
                    <option value="Related_User_ID">相关用户ID</option>
                    <option value="Related_User_NickName">相关用户</option>
                    <option value="Trade_Order_No">相关单据号</option>
                </select>
                <input id="dtpBankTrade_F_SValue" class="fvalue" type="text"/>
                <input id="dtpBankTrade_F_StartDate" type="text" style="width: 76px;" placeholder="交易时间">
                <label>-</label>
                <input id="dtpBankTrade_F_EndDate" type="text" style="width: 76px;" placeholder="结束时间">
                <select id="dtpBankTrade_F_SelectDate"></select>
                <select id="dtpBankTrade_F_TradeCurrency" style="width: 93px;" data-databind="TradeCurrency" placeholder="币种过滤…"></select>
                <select id="dtpBankTrade_F_TradeType" style="width: 140px;" data-databind="UserBankTransaction" placeholder="交易类型过滤…"></select>
                <button id="dtpBankTrade_F_Btn"></button>
            </div>
        </div>
    </div>
</div>
<script src="<%- Virtual_Path.Static %>jquery.plugin/dataTables/jquery.dataTables.min.js"></script>
<script src="<%- Virtual_Path.Static %>jquery.plugin/dataTables/jquery.dataTables.bootstrap.min.js"></script>
<script>
    $(function () {
        //region 时间输入框插件
        $('#dtpBankTrade_F_StartDate, #dtpBankTrade_F_EndDate').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            minView: 2,
            autoclose: true
        });
        //endregion
        //region 绑定日期选择框
        $.KOC.Date.Select.Bind({
            eSelect: $('#dtpBankTrade_F_SelectDate'),
            eBegin: $('#dtpBankTrade_F_StartDate'),
            eEnd: $('#dtpBankTrade_F_EndDate')
        });
        //endregion
        //region dtpBankTrade
        $("#dtpBankTrade").dataTable({
            'aoColumns': [
                {
                    'sWidth': '136px', 'data': 'Trade_Order_No', 'sName': 'Trade_Order_No', 'sTitle': "相关单据号", 'sClass': 'center',
                    'createdCell': function (td, cellData) {
                        $(td).html($('<a/>').attr('data-openwindow', cellData).text(cellData));
                    }
                },
                {
                    'sWidth': '110px', 'data': 'Trade_ID', 'sName': 'Trade_ID', 'sTitle': '流水号', 'sClass': 'center'
                },
                {
                    'data': 'User_NickName', 'sName': 'User_NickName', 'sTitle': '用户昵称', 'sClass': 'r-left',
                    'createdCell': function (td, cellData, rowData) {
                        $(td).html($('<a class="tooltip-" data-rel="tooltip" data-original-title="用户ID：'+ rowData.User_ID + '"/>').attr('data-openwindow', ':UserInfo:' + rowData.User_ID).html(cellData));
                    }
                },
                {
                    'sWidth': '110px', 'data': 'Trade_Type_Name', 'sName': 'Trade_Type', 'sTitle': "交易类型", 'sClass': 'center'
                },
                {
                    'sWidth': '55px', 'data': 'Trade_Currency', 'sTitle': '币种', 'sClass': 'center', 'bSortable': false,
                    'createdCell': function (td, cellData) {
                        switch (cellData) {
                            case 1:
                                $(td).html('<span class="badge badge-info">金币</span>');
                                break;
                            case 2:
                                $(td).html('<span class="badge badge-purple">金豆</span>');
                                break;
                        }
                    }
                },
                {
                    'sWidth': '80px', 'data': 'Trade_Flag', 'sTitle': '方式', 'sClass': 'center', 'bSortable': false,
                    'createdCell': function (td, cellData) {
                        switch (cellData) {
                            case -1:
                                $(td).html('<span class="label label-danger"><i class="fa fa-sign-out"></i> 出帐</span>');
                                break;
                            case 1:
                                $(td).html('<span class="label label-success"><i class="fa fa-sign-in"></i> 入帐</span>');
                                break;
                        }
                    }
                },
                {
                    'sWidth': '9%', 'data': 'Trade_Amt', 'sName': 'Trade_Amt', 'sTitle': '交易金额', 'sClass': 'center t-right',
                    'createdCell': function (td, cellData, rowData) {
                        switch (rowData.Trade_Flag) {
                            case -1:
                                $(td).html('<span class="tooltip- red" data-rel="tooltip" data-original-title="交易金额价值：-' + (cellData / 1000).toFixed(2) + '">-' + cellData + '</span>');
                                break;
                            case 1:
                                $(td).html('<span class="tooltip- green" data-rel="tooltip" data-original-title="交易金额价值：' + (cellData / 1000).toFixed(2) + '">' + cellData + '</span>');
                                break;
                        }
                    }
                },
                {
                    'sWidth': '9%', 'data': 'Amt', 'sTitle': '帐户余额', 'sClass': 'center t-right', 'bSortable': false,
                    'createdCell': function (td, cellData) {
                        if (cellData > 0) {
                            $(td).html('<span class="tooltip-" data-rel="tooltip" data-original-title="帐户余额价值：' + $.KOC.String.ToCurrencyPositiveStr(cellData / 1000) + '">' + cellData + '</span>');
                        }
                    }
                },
                {
                    'sWidth': '10%', 'data': 'Related_User_NickName', 'sName': 'Trade_Type', 'sTitle': "相关用户", 'sClass': 'center t-left',
                    'createdCell': function (td, cellData, rowData) {
                        $(td).html($('<a class="tooltip-" data-rel="tooltip" data-original-title="相关用户ID：'+ rowData.Related_User_ID + '"/>').attr('data-openwindow', ':UserInfo:' + rowData.Related_User_ID).html(cellData));
                    }
                },
                {
                    'sWidth': "140px", 'data': 'Create_Date', 'sName': 'Create_Date', 'sTitle': "交易时间", 'sClass': 'center',
                    'createdCell': function (td, cellData) {
                        $(td).text(moment(cellData).format('YY/MM/DD HH:mm:ss'));
                    }
                }
            ],
            'aaSorting': [0, 'desc'],
            'sAjaxSource': '/ajax/user.page.userbanktrade',
            'fnServerParams': function (aoData) {
                if (!this.arrPageFilter) {
                    this.arrPageFilter = {
                        F_StartDate: $(this.selector + '_F_StartDate').val(),
                        F_EndDate: $(this.selector + '_F_EndDate').val(),
                        F_TradeCurrency: $(this.selector + '_F_TradeCurrency').val(),
                        F_TradeType: $(this.selector + '_F_TradeType').val()
                    };
                    switch (this.arrPageFilter.F_TradeType) {
                        case 'in':
                            this.arrPageFilter.F_TradeFlag = 1;
                            break;
                        case 'out':
                            this.arrPageFilter.F_TradeFlag = -1;
                            break;
                        default:
                            this.arrPageFilter.F_TradeFlag = 0;
                            break;
                    }
                } else {
                    $(this.selector + '_F_StartDate').val(this.arrPageFilter.F_StartDate);
                    $(this.selector + '_F_EndDate').val(this.arrPageFilter.F_EndDate);
                    $(this.selector + '_F_TradeCurrency').select2('val', this.arrPageFilter.F_TradeCurrency || '-1');
                    $(this.selector + '_F_TradeType').select2('val', this.arrPageFilter.F_TradeType || '-1');
                }
                this.ofnServerParams(aoData);
            },
            'fnFooterCallback': function (nFoot, aData) {
                var _Trade_Amt = 0;
                _.forEach(aData, function (ThisValue) {
                    _Trade_Amt += ThisValue.Trade_Flag * ThisValue.Trade_Amt;
                });
                $(nFoot).find('[name="Trade_Amt"]').attr({
                    'data-rel': 'tooltip',
                    'data-original-title': '交易金额总计价值：' + (_Trade_Amt / 1000).toFixed(2),
                    'class': (_Trade_Amt < 0 ? 'tooltip- red' : 'tooltip- green')
                }).text(_Trade_Amt);
            },
            'fnDrawCallback': function () {
                $.Common.Bootstrap.Tooltip(this);
                this.ofnDrawCallback();
            }

        });
        //endregion
    })
</script>